import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';

class CancelAccountController extends GetxController {
  final double navHeight = 44 + Get.mediaQuery.padding.top;
  final double navTop = 44.0;
  RxBool isChecked = RxBool(false);
}

class CancelAccountPage extends GetView<CancelAccountController> {
  const CancelAccountPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removeViewPadding(
      context: context,
      removeBottom: true,
      removeLeft: true,
      removeRight: true,
      removeTop: true,
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(controller.navHeight),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark,
            child: Container(
              color: Colors.white,
              height: controller.navHeight,
              padding: Get.mediaQuery.padding,
              child: Stack(
                children: [
                  Positioned(
                    width: 40,
                    height: controller.navTop,
                    top: 0,
                    left: 0,
                    child: Center(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 20,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ).onTap(Get.back),
                  ),
                  Center(
                    child: Text(
                      '注销账户',
                      softWrap: true,
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16,
                        fontWeight: FontWeight.w700,
                        color: ColorsUtils.color0000,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: (Get.width - 330) / 2),
          child: Column(
            children: [
              Container(
                alignment: Alignment.centerLeft,
                padding: const EdgeInsets.only(top: 25, bottom: 15),
                child: Text(
                  '账号注销后，以下信息将被清空且无法找回',
                  style: StylesUtils.customTextStyle(
                    color: ColorsUtils.color0000,
                    fontSize: StylesUtils.fontSize16,
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.all(15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: HexColor(ColorsUtils.colorF7f7),
                ),
                child: ListBody(
                  children: [
                    Container(
                      margin: const EdgeInsets.only(bottom: 16),
                      child: Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '•',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorFf64,
                              ),
                            ),
                            TextSpan(
                              text: '  身份、账号信息、隐私信息、用户权益等',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(bottom: 16),
                      child: Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '•',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorFf64,
                              ),
                            ),
                            TextSpan(
                              text: '  交易记录',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(bottom: 16),
                      child: Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '•',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorFf64,
                              ),
                            ),
                            TextSpan(
                              text: '  红包、代金券等',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '•',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorFf64,
                              ),
                            ),
                            TextSpan(
                              text: '  银行卡的快捷支付服务',
                              style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color0000,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Divider(
                      height: 32,
                      thickness: 1,
                      color: HexColor(ColorsUtils.colorF2f2),
                      indent: 3,
                      endIndent: 3,
                    ),
                    Container(
                      alignment: Alignment.center,
                      child: Text(
                        '请确保所有交易已完结且无纠纷，账号注销后的历史交易可能产生的资金退回权益等将视作自动放弃。',
                        style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize12,
                            color: ColorsUtils.color9999,
                            lineHeight: 1.3),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                margin: const EdgeInsets.symmetric(vertical: 20),
                alignment: Alignment.centerLeft,
                child: Text.rich(
                  TextSpan(
                    children: [
                      WidgetSpan(
                          child: Obx(
                            () => controller.isChecked.isTrue
                                ? Icon(
                                    CupertinoIcons.checkmark_alt_circle_fill,
                                    size: 20,
                                    color: HexColor(ColorsUtils.colorFf64),
                                  )
                                : Icon(
                                    CupertinoIcons.circle,
                                    size: 20,
                                    color: HexColor(ColorsUtils.colorCccc),
                                  ),
                          ),
                          alignment: PlaceholderAlignment.middle),
                      TextSpan(
                        text: ' 我已阅读并同意',
                        style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999,
                          fontSize: StylesUtils.fontSize12,
                        ),
                      ),
                      TextSpan(
                        text: ' 用户注销协议',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize12,
                          color: ColorsUtils.colorFf64,
                        ),
                      ),
                    ],
                  ),
                ).onTap(() {
                  controller.isChecked.value = !controller.isChecked.value;
                }),
              ),
              Center(
                child: Container(
                  constraints:
                      const BoxConstraints.expand(width: 315, height: 45),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(23),
                    gradient: LinearGradient(
                      colors: [
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(255, 153, 0, 1),
                        ColorsUtils.rgba(254, 70, 1, 1),
                        ColorsUtils.rgba(254, 70, 1, 1)
                      ],
                      stops: const [
                        0,
                        0,
                        1,
                        1,
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      transform: GradientRotation(
                        RadianUtils.angleToRadian(90),
                      ),
                    ),
                  ),
                  child: Text(
                    '下一步',
                    style: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize16,
                    ),
                  ),
                ).onTap(() {
                  Get.toNamed(Routes.mineCancelVerify);
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
